<template>
    <div class="login_con">
        <div class="logo_box">
            <a href="#/" class="logo">
                <img src="/static/images/logo1.png" alt="">
            </a>
            <a href="#/" class="back">
                <img src="/static/images/back.png" alt="">
                <span>返回首页</span>
            </a>
        </div>
        <div class="login_box" :style="type==='register'? ismobile?'height:10.2rem':'height:666px':''">
            <div class="login_left">
                <img src="/static/images/login_left.png" alt="">
            </div>
            <div class="login_right" v-if="type==='login'">
                <div class="login_title">
                    欢迎登录
                </div>
                <div class="login_des">
                    党总支党建品牌———创客空间
                </div>
                <ul class="login_list">
                    <li class="login_item">
                        <img src="/static/images/phone.png" alt="">
                        <input type="text" placeholder="请输入用户名" v-model="username">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/password.png" alt="">
                        <input type="password" placeholder="请输入密码" v-model="password">
                    </li>
                </ul>
                <div class="btns">
                    <!-- <a href="javascript:;" @click="change('forget')">
                        忘记密码？
                    </a> -->
                    <span>没有账号？去 <a href="javascript:;" @click="change('register')">注册</a></span>
                </div>
                <div class="login_btn" @click="login">登录</div>
            </div>
            <div class="login_right" v-if="type==='register'"  :style="type==='register'? ismobile?'height:10rem':'height:666px':''" >
                <div class="login_title">
                    欢迎注册
                </div>
                <div class="login_des">
                    党总支党建品牌———创客空间
                </div>
                <ul class="login_list">
                    <!-- <li class="login_item">
                        <img src="/static/images/phone.png" alt="">
                        <select name="" id="" v-model="group_id" aria-placeholder="请选择注册身份">
                            <option value="2">企业</option>
                        </select>
                    </li> -->
                   
                    <li class="login_item">
                        <img src="/static/images/phone.png" alt="">
                        <input type="text" placeholder="真实姓名" v-model="realname">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/phone.png" alt="">
                        <input type="text" placeholder="请输入手机号" v-model="username">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/password.png" alt="">
                        <input type="password" placeholder="请输入密码" v-model="password">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/password.png" alt="">
                        <input type="password" placeholder="请再次输入密码" v-model="repassword">
                    </li>
                    <li class="login_item" v-if="group_id==2">

                        <el-upload
                            class="upload-demo"
                            list-type="picture-card"
                            action="http://jdxy.ituohong.cn/admin/upload"
                            :on-success="handelSuccess"
                            >
                            <span>请上传营业执照</span>
                        
                            </el-upload>
                    </li>
                    <li class="login_item" v-if="group_id==2">
                        <el-upload
                        class="upload-demo"
                        list-type="picture-card"
                        action="http://jdxy.ituohong.cn/admin/upload"
                        :on-success="handelSuccess1"
                        >
                        <span>请上传法人身份证</span>

                        </el-upload>
                    </li>
                </ul>
                <div class="btns">
                    <a href="javascript:;" @click="change('login')">
                        去登录
                    </a>
                    <!-- <span>没有账号？去 <a href="javascript:;" @click="change('register')">注册</a></span> -->
                </div>
                <div class="login_btn" @click="register">确认</div>
            </div>
            <div class="login_right" v-if="type==='forget'">
                <div class="login_title">
                   重置密码
                </div>
                <ul class="login_list">
                    <li class="login_item">
                        <img src="/static/images/phone.png" alt="">
                        <input type="text" placeholder="请输入手机号">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/password.png" alt="">
                        <input type="password" placeholder="请输入密码">
                    </li>
                    <li class="login_item">
                        <img src="/static/images/password.png" alt="">
                        <input type="password" placeholder="请再次输入密码">
                    </li>
                </ul>
                <div class="btns">
                    <a href="javascript:;" @click="change('login')">
                        去登录
                    </a>
                    <span>没有账号？去 <a href="javascript:;" @click="change('register')">注册</a></span>
                </div>
                <div class="login_btn">确认</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            type:'login',
            username:'',
            realname:'',
            password:'',
            repassword:'',
            group_id:2,
            ismobile:false,
            sfz:'',
            yyzz:''
        }
    },
    mounted(){
        this.wid = document.body.clientWidth
        if(this.wid<900){
            this.ismobile = true
        }else{
            this.ismobile = false
        }
    },
    watch:{
        group_id:{
            handler(newval,oldval){
                console.log(newval)
            },
            deep:true
        },
        wid:{
            handler(newval,oldval){
                console.log(newval)
                if(newval<900){
                    this.ismobile = true
                }else{
                    this.ismobile = false
                }
                console.log('ismobile',this.ismobile)
            },
            deep:true,
            immediate:true
        }
    },
    methods:{
        change(type){
            this.type = type
        },
        register(){
            if(!this.username){
                alert('电话号码不能为空！')
            }else if(!this.realname){
                alert('请先填写您的真实姓名！')
            }else if(!this.password){
                alert('请先填写您的密码！')
            }else if(this.password!=this.repassword){
                alert('密码与确认密码不一致请重新填写！')
            }else if(!this.yyzz){
                alert('请上传您的营业执照！')
            }else if(!this.sfz){
                alert('请先上传法人身份证！')
            }else{
                this.$api.post('register',{
                    "username":this.username,
                    "password":this.password,
                    "realname":this.realname,
                    "group_id":this.group_id,
                    sfz:this.sfz,
                    yyzz:this.yyzz
                }).then(res=>{
                    if(res.code==200){
                        alert(res.data.msg+'去登录')
                        this.username = ''
                        this.password = ''
                        this.type = 'login'
                    }else{
                        alert(res.message+'去登录')
                        this.username = ''
                        this.password = ''
                        this.type = 'login'
                    }
                })
            }
            
        },
         // 文件上传成功时
         handelSuccess(res, file, fileList) {
            console.log("上传成功", res, file, fileList);
            this.yyzz = res.data.url
        },
        handelSuccess1(res, file, fileList) {
            console.log("上传成功", res, file, fileList);
            this.sfz = res.data.url
        },
        login(){
            if(!this.username){
                alert('电话号码不能为空！')
            }else if(!this.password){
                alert('请先填写您的密码！')
            }else{
                this.$api.post('login',{
                    "username":this.username,
                    "password":this.password,
                }).then(res=>{
                    if(res.code==200){
                        alert('登录成功')
                        localStorage.setItem('token','Bearer '+res.data.token)
                        this.$router.push({
                            path:'/space/cmarket'
                        })
                    }else{
                        alert(res.message+'请重新输入或去注册')
                    }
                })
            }
            
        }

    }
}
</script>
<style lang="scss" scoped>
@import  '@/assets/css/common.scss';
</style>